<template>
    <div class="container">
        <!-- 登录区 -->
        <div class="login">
            <div class="title">
                <span>手机号密码注册</span>
            </div>

            <div class="form">
                <el-form :model="user" :rules="rules" ref="user">
                    <div class="input-item">
                        <el-form-item prop="phone">
                            <el-input
                                size="small"
                                type="text"
                                placeholder="请输入手机号"
                                prefix-icon="el-icon-search"
                                v-model="user.phone">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="input-item">
                        <el-form-item prop="password">
                            <el-input
                                size="small"
                                type="password"
                                placeholder="请输入密码"
                                prefix-icon="el-icon-search"
                                v-model="user.password">
                            </el-input>
                        </el-form-item>
                    </div>

                    <div class="sug">
                        <el-form-item class="sug-form" prop="agreement">
                            <el-checkbox class="sug-font" v-model="user.agreement">
                                我已阅读并同意<span>《用户协议》</span>
                                <span>《法律声明》</span>
                            </el-checkbox>
                        </el-form-item>
                    </div>

                    <div class="submit">
                        <el-form-item>
                            <el-button type="primary" class="submit-button" @click="submitForm('user')">注 &nbsp;册</el-button>
                        </el-form-item>
                        
                    </div>

                    <div class="other">
                        <span></span>
                        <span @click="toLogin">已有账号？<i>返回登录</i></span>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { register } from '../../api/user'
export default {
    name: 'Registe',

    data() {
        return {
            checked:false,
            user:{ 
                phone:'',
                password:'',
                agreement:[],
            },
            rules:{ 
                phone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入合法的电话号码', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { pattern:/^[0-9A-Za-z]{6,10}$/,message:'请输入6-10个英文字母或数字',trigger:'blur'}
                ],
                agreement: [
                    { type: 'array', required: true, message: '请勾选协议', trigger: 'change' }
                ],
            }
        };
    },

    mounted() {
        
    },

    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.register();
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },

        /**
         * 返回登录
         */
        toLogin(){ 
            this.$router.push({ 
                name:'login'
            })
        },


        /**
         * 用户注册
         */
        register() { 
            let data = { 
                phone:this.user.phone,
                password:this.user.password
            }

            register(data).then(res=>{ 
                console.log("user register = ",res);
                if(res.data.type == 200){ 
                    this.$message({ 
                        type:'success',
                        message:'注册成功'
                    })
                    
                    //路由跳转
                    // this.$router.push({ 
                    //     name:'home'
                    // });

                } else { 
                    this.$message({ 
                        type:'error',
                        message:'此用户已注册'
                    })
                }  
            })
        }
    },
};
</script>

<style lang="less" scoped>
.container{ 
    width: 100%;
    height: 100%;
    background-image: url('../../assets/loginBack.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;

    .login{ 
        position: absolute;
        width:15rem;
        height: 15.625rem;
        padding: 2.5rem;
        background-color: rgba(0,0,0,.35);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        color: #fff;

        .title{ 
            padding-bottom: .9375rem;
            text-align: center;
        }

        .form{ 
            .input-item{ 
                width: 15rem;
                height: 3.475rem;
            }

            .sug{
                height: 3.125rem;
                .sug-form{ 
                    height: 1.875rem;
                    margin: 0;
                }
                .sug-font /deep/ .el-checkbox__label{ 
                    font-size: 8px;
                    color:rgba(255,255,255,.8);
                    span{ 
                        color: #98C6EB;
                    }
                
                }
            }

            .submit{ 
                height: 2.8125rem;
                margin: 5px 0;
                .submit-button{ 
                    width: 100%;
                }
            }

            .other{ 
                width: 100%;
                height: 1.875rem;
                display: flex;
                justify-content: space-between;

                span{ 
                    display: block;
                    font-size: .5rem;
                    line-height: 1.875rem;
                    color: rgba(255,255,255,.7);
                }

                span:hover{ 
                    color: #98C6EB;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>